<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane style="padding: 0 20px;padding-left:10px" label="订单信息" name="orderInfo">
        <el-form
          :rules="formRules"
          ref="elForm"
          :model="formData"
          style="padding: 20px;  overflow-y: auto"
          size="medium"
          label-width="130px"
        >
          <el-card class="flight-info-card">
        <template #header>
          <div class="card-header">
            <span>基础信息</span>
          </div>
        </template>
        <el-row :gutter="20">
           <el-col :span="6">
            <el-form-item label="订单编号" prop="customer_id">
             <el-input
             disabled
               v-model="formData.no"
               placeholder="系统默认生成"
               style="width: 100%"
             >
             </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接单时间" prop="flight_info.accept_at">
              <el-date-picker
                v-model="formData.accept_at"
                type="datetime"
                placeholder="请选择截单时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单进度" prop="order_process_id">
              <el-select
                v-model="formData.order_process_id"
                placeholder="请选择订单进度"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in progressList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态" prop="order_status_id">
              <el-select
                v-model="formData.order_status_id"
                placeholder="请选择订单状态"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
           <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户" prop="customer_id">
              <el-select
                v-model="formData.customer_id"
                placeholder="请选择客户"
                clearable
                style="width: 100%"
                filterable
                remote
                :remote-method="remoteCustomMethod"
                :loading="customLoading"
              >
                <div
                  v-infinite-scroll="getLoad"
                  :infinite-scroll-disabled="busy"
                >
                  <el-option
                    v-for="item in customersList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商" prop="supplier_id">
              <el-select
                v-model="formData.supplier_id"
                placeholder="请选择供应商"
                clearable
                style="width: 100%"
                filterable
                remote
                :remote-method="remoteSupplierMethod"
                :loading="supplierLoading"
              >
              <div
                  v-infinite-scroll="getSupplierLoad"
                  :infinite-scroll-disabled="supplier_busy"
                >
                <el-option
                  v-for="item in suppliersList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报关方" prop="customs_broker">
              <el-select
                v-model="formData.customs_broker"
                placeholder="请选择报关方"
                clearable
                style="width: 100%"
              >
                <el-option label="我司报关" value="0"></el-option>
                <el-option label="代理报关" value="1"></el-option>
                <el-option label="客户自报" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交货方" prop="delivery_party">
              <el-select
                v-model="formData.delivery_party"
                placeholder="请选择交货方"
                clearable
                style="width: 100%"
              >
                <el-option label="我司交" value="0"></el-option>
                <el-option label="代理交" value="1"></el-option>
                <el-option label="客户交" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="6">
            <el-form-item label="客户计费重KG" prop="customer_billing_weight">
              <el-input
                v-model="formData.customer_billing_weight"
                placeholder="请输入客户计费重KG"
                style="width: 100%"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="6">
            <el-form-item label="供应商计费重KG" prop="supplier_billing_weight">
              <el-input
                v-model="formData.supplier_billing_weight"
                placeholder="请输入供应商计费重KG"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="账期天数" >
              <el-input
                v-model="formData.period_days"
                placeholder="请输入账期天数"
                style="width:100%"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="付款账期" prop="payment_period_id">
              <el-select
                v-model="formData.payment_period_id"
                placeholder="请选择付款账期"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in paymentPeriodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>






        </el-row>
        <!-- <el-row :gutter="20">

           <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- 按照此格式继续添加其他表单项 -->
        <!-- <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item
              label="客户付款账期"
              prop="customer_payment_period_id"
            >
              <el-select
                v-model="formData.customer_payment_period_id"
                placeholder="请选择客户付款账期"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in paymentPeriodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接单时间" prop="accept_at">
              <el-date-picker
                v-model="formData.accept_at"
                type="datetime"
                placeholder="请选择接单时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="交货方" prop="delivery_party">
              <el-select
                v-model="formData.delivery_party"
                placeholder="请选择交货方"
                clearable
                style="width: 100%"
              >
                <el-option label="我司交" value="0"></el-option>
                <el-option label="代理交" value="1"></el-option>
                <el-option label="客户交" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row :gutter="20">


          <el-col :span="6">
            <el-form-item label="发货人" prop="shipper">
              <el-select
                v-model="formData.shipper"
                placeholder="请选择发货人"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in shipperList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人" prop="receiver">
              <el-select
                v-model="formData.receiver"
                placeholder="请选择收货人"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in receiverList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="通知人" prop="notify_person">
              <el-select
                v-model="formData.notify_person"
                placeholder="请选择通知人"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in notifyPersonList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="资料文件" prop="file">
              <el-upload
                action="https://www.fastmock.site/mock/53853222247c23327208053001002001/api/upload"

                :auto-upload="false"
              >
                <el-button slot="trigger" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单文件" prop="bl_file">
              <el-upload
                action="https://www.fastmock.site/mock/53853222247c23327208053001002001/api/upload"

                :auto-upload="false"
              >
                <el-button slot="trigger" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>

        </el-row> -->
        <!-- <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="唛头" prop="remark">
              <el-input
                v-model="formData.mark"
                placeholder="请输入唛头"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="客户空运单价"
              prop="customer_air_freight_price"
            >
              <el-input
                v-model="formData.customer_air_freight_price"
                placeholder="请输入客户空运单价"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="供应商空运单价"
              prop="supplier_air_freight_price"
            >
              <el-input
                v-model="formData.supplier_air_freight_price"
                placeholder="请输入供应商空运单价"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-card>
      <!-- 航班信息 -->
      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>航班信息</span>
          </div>
        </template>
        <!-- 继续用 el-row 和 el-col 包裹剩余表单项 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="提单编号" prop="bl_no">
              <el-input
                v-model="formData.flight_info.bl_no"
                placeholder="请输入提单编号"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入舱编号" prop="flight_info.rc_no">
              <el-input
                v-model="formData.flight_info.rc_no"
                placeholder="请输入入舱编号"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航空公司" prop="flight_info.airline_id">
              <el-select
                v-model="formData.flight_info.airline_id"
                placeholder="请选择航空公司"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in airlineList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航班编号" prop="flight_info.flight_no">
              <el-input
                v-model="formData.flight_info.flight_no"
                placeholder="请输入航班编号"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item
              label="始发站"
              prop="flight_info.originating_station_id"
            >
              <el-select
                v-model="formData.flight_info.originating_station_id"
                placeholder="请选择始发站"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in stationList.filter((item) => item.type.includes(0))"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中转港" prop="flight_info.transfer_station_id">
              <el-select
                v-model="formData.flight_info.transfer_station_id"
                placeholder="请选择中转港"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in stationList.filter((item) => item.type.includes(1))"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="目的港"
              prop="flight_info.destination_station_id"
            >
              <el-select
                v-model="formData.flight_info.destination_station_id"
                placeholder="请选择目的港"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in stationList.filter((item) => item.type.includes(2))"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航班日期（ETD）" prop="flight_info.flight_date">
              <el-date-picker
                v-model="formData.flight_info.flight_date"
                type="date"
                placeholder="请选择航班日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="到港日期(ETA)" prop="flight_info.arrival_date">
              <el-date-picker
                v-model="formData.flight_info.arrival_date"
                type="date"
                placeholder="请选择到港日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二程日期" prop="flight_info.second_trip_date">
              <el-date-picker
                v-model="formData.flight_info.second_trip_date"
                type="date"
                placeholder="请选择二程日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="最晚交货时间"
              prop="flight_info.latest_delivery_time"
            >
              <el-date-picker
                v-model="formData.flight_info.latest_delivery_time"
                type="datetime"
                placeholder="请选择最晚交货时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截单时间" prop="flight_info.cut_off_at">
              <el-date-picker
                v-model="formData.flight_info.cut_off_at"
                type="datetime"
                placeholder="请选择截单时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="航班时效(天)" prop="flight_info.flight_day">
              <el-input
                v-model="formData.flight_info.flight_day"
                placeholder="请输入航班时效(天)"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="航班实际时效(天)"
              prop="flight_info.actual_flight_day"
            >
              <el-input
                v-model="formData.flight_info.actual_flight_day"
                placeholder="请输入航班实际时效(天)"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否延误" prop="flight_info.is_delays">
              <el-switch
                v-model="formData.flight_info.is_delays"
                active-text="是"
                inactive-text="否"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>订舱数据</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="件数（件）" prop="booking_info.quantity">
              <el-input
                v-model.number="formData.booking_info.quantity"
                placeholder="请输入数量"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量（KG）" prop="booking_info.weight">
              <el-input
                v-model.number="formData.booking_info.weight"
                placeholder="请输入重量"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体积（CBM）" prop="booking_info.volume">
              <el-input
                v-model.number="formData.booking_info.volume"
                placeholder="请输入体积"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="150px" label="材积重/6000（KG）" prop="booking_info.volume_weight">
              <el-input
                v-model.number="formData.booking_info.volume_weight"
                placeholder="请输入体积重"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="比例（密度）" prop="booking_info.proportion">
              <el-input
                v-model.number="formData.booking_info.proportion"
                placeholder="请输入比例"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注" prop="booking_info.remark">
              <el-input
                v-model="formData.booking_info.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 预测信息 -->
      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>出货数据</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="件数（件）" prop="forecast_info.quantity">
              <el-input
                v-model.number="formData.forecast_info.quantity"
                placeholder="请输入数量"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量（KG）" prop="forecast_info.weight">
              <el-input
                v-model.number="formData.forecast_info.weight"
                placeholder="请输入重量"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体积（CBM）" prop="forecast_info.volume">
              <el-input
                v-model.number="formData.forecast_info.volume"
                placeholder="请输入体积"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="150px" label="材积重/6000（KG）" prop="forecast_info.volume_weight">
              <el-input
                v-model.number="formData.forecast_info.volume_weight"
                placeholder="请输入体积重"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="比例（密度）" prop="forecast_info.proportion">
              <el-input
                v-model.number="formData.forecast_info.proportion"
                placeholder="请输入比例"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注" prop="forecast_info.remark">
              <el-input
                v-model="formData.forecast_info.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

       <!-- 机场数据 -->
      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>机场数据</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="件数（件）" prop="airport_info.quantity">
              <el-input
                v-model.number="formData.airport_info.quantity"
                placeholder="请输入数量"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量（KG）" prop="airport_info.weight">
              <el-input
                v-model.number="formData.airport_info.weight"
                placeholder="请输入重量"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体积（CBM）" prop="airport_info.volume">
              <el-input
                v-model.number="formData.airport_info.volume"
                placeholder="请输入体积"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="150px" label="材积重/6000（KG）" prop="airport_info.volume_weight">
              <el-input
                v-model.number="formData.airport_info.volume_weight"
                placeholder="请输入体积重"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="比例（密度）" prop="airport_info.proportion">
              <el-input
                v-model.number="formData.airport_info.proportion"
                placeholder="请输入比例"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注" prop="airport_info.remark">
              <el-input
                v-model="formData.airport_info.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 货物资料 -->
       <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>货物资料</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="发货人" prop="shipper">
              <el-input
                v-model.number="formData.shipper"
                placeholder="发货人"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人" prop="receiver">
              <el-input
                v-model.number="formData.receiver"
                placeholder="请输入收货人"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="通知人" prop="notify_person">
              <el-input
                v-model.number="formData.notify_person"
                placeholder="请输入通知人"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="唛头" prop="remark">
              <el-input
                v-model="formData.mark"
                placeholder="请输入唛头"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label-width="190" label="资料文件（压缩包）" prop="file">
              <el-upload
                action="https://www.fastmock.site/mock/53853222247c23327208053001002001/api/upload"

                :auto-upload="false"
              >
                <el-button slot="trigger" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上传提单" prop="bl_file">
              <el-upload
                action="https://www.fastmock.site/mock/53853222247c23327208053001002001/api/upload"

                :auto-upload="false"
              >
                <el-button slot="trigger" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

     <!-- 相关人员 -->
       <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>相关人员</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客服人员" prop="customer_service_user_id">
              <el-select
                v-model="formData.customer_service_user_id"
                placeholder="请选择客服人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in notifyPersonList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="销售人员" prop="sale_user_id">
              <el-select
                v-model="formData.sale_user_id"
                placeholder="请选择销售人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in notifyPersonList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
         <el-col :span="6">

            <el-form-item label="财务人员" prop="finance_user_id">
              <el-select
                v-model="formData.finance_user_id"
                placeholder="请选择财务人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in notifyPersonList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录单人员" prop="user_id">
              <el-select
                v-model="formData.user_id"
                placeholder="请选择录单人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in notifyPersonList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        </el-row>

      </el-card>


        </el-form>
      </el-tab-pane>
      <el-tab-pane label="费用明细" name="feeInfo">
        <el-form
          :rules="formRules"
          ref="elForm"
          :model="formData"
          style="padding: 20px;  overflow-y: auto"
          size="medium"
          label-width="130px"
        >

       <!-- 费用统计 -->
       <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>费用统计</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户费用总计" prop="total_customer_fee_amount">
              <el-input
                v-model.number="formData.total_customer_fee_amount"
                placeholder="请输入客户费用总计"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="第三方费用总计" prop="total_third_party_amount">
              <el-input
                v-model.number="formData.total_third_party_amount"
                placeholder="请输入第三方费用总计"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        <el-col :span="6">
            <el-form-item label="供应商费用总计" prop="total_supplier_fee_amount">
              <el-input
                v-model.number="formData.total_supplier_fee_amount"
                placeholder="请输入供应商费用总计"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
        </el-col>
          <el-col :span="6">
            <el-form-item label="毛利" prop="gross_profit_amount">
              <el-input
                v-model.number="formData.gross_profit_amount"
                placeholder="请输入毛利"
                style="width: 100%"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="毛利率%" prop="gross_profit_rate">
              <el-input
                v-model.number="formData.gross_profit_rate"
                placeholder="毛利率%"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="客户付款账期"
              prop="customer_payment_period_id"
            >
              <el-select
                v-model="formData.customer_payment_period_id"
                placeholder="请选择客户付款账期"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in paymentPeriodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
            <el-form-item label="客户账期天数" prop="customer_payment_days">
              <el-input
                v-model.number="formData.gross_profit_rate"
                placeholder="客户账期天数"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
          </el-col> -->

           <el-col :span="6">
            <el-form-item label="预计付款日期" prop="expected_payment_date">
              <el-date-picker
                v-model="formData.expected_payment_date"
                type="date"
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
                placeholder="选择预计付款日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="客户空运单价" prop="customer_air_freight_price">
              <el-input
                v-model.number="formData.customer_air_freight_price"
                placeholder="客户空运单价"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row :gutter="20">
           <el-col :span="6">
            <el-form-item label="供应商空运单价" prop="supplier_air_freight_price">
              <el-input
                v-model.number="formData.supplier_air_freight_price"
                placeholder="供应商空运单价"
                style="width: 100%"
                 type="number"
              ></el-input>
            </el-form-item>
          </el-col>



        </el-row>

      </el-card>

      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>客户费用明细</span>
          </div>
        </template>
        <el-table :data="formData.customer_fees" border style="width: 100%">
          <el-table-column prop="fee_type_id" label="费用类型">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>费用类型</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.fee_type_id"
                placeholder="请选择费用类型"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in feeTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="currency_id" label="货币类型">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>货币类型</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.currency_id"
                placeholder="请选择货币类型"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in currencyTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>数量</span>
            </template>
            <template #default="scope">
              <el-input
                v-model.number="scope.row.quantity"
                placeholder="请输入数量"
                style="width: 100%"
                @input="calculatetotal_amount(scope.$index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>单价</span>
            </template>
            <template #default="scope">
              <el-input
                v-model.number="scope.row.price"
                placeholder="请输入单价"
                style="width: 100%"
                @input="calculatetotal_amount(scope.$index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="total_amount" label="小计">
            <template #default="scope">
              <el-input
                v-model="scope.row.total_amount"
                disabled
                style="width: 100%"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template #default="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                @click="removeFee(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; text-align: right">
          <el-button size="small" type="primary" @click="addFee"
            >新增一项费用</el-button
          >
        </div>
      </el-card>
      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>供应商费用明细</span>
          </div>
        </template>
        <el-table :data="formData.supplier_fees" border style="width: 100%">
          <el-table-column prop="fee_type_id" label="费用类型">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>费用类型</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.fee_type_id"
                placeholder="请选择费用类型"
                clearable
                style="width: 100%"
                :rules="[
                  {
                    required: formData.supplier_fees.length > 0,
                    message: '请选择费用类型',
                    trigger: 'change',
                  },
                ]"
              >
                <el-option
                  v-for="item in feeTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="currency_id" label="货币类型">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>货币类型</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.currency_id"
                placeholder="请选择货币类型"
                clearable
                style="width: 100%"
                :rules="[
                  {
                    required: formData.supplier_fees.length > 0,
                    message: '请选择货币类型',
                    trigger: 'change',
                  },
                ]"
              >
                <el-option
                  v-for="item in currencyTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>数量</span>
            </template>
            <template #default="scope">
              <el-input
                v-model.number="scope.row.quantity"
                placeholder="请输入数量"
                style="width: 100%"
                @input="calculateSuppliertotal_amount(scope.$index)"
                :rules="[
                  {
                    required: formData.supplier_fees.length > 0,
                    message: '请输入数量',
                    trigger: 'blur',
                  },
                ]"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>单价</span>
            </template>
            <template #default="scope">
              <el-input
                v-model.number="scope.row.price"
                placeholder="请输入单价"
                style="width: 100%"
                @input="calculateSuppliertotal_amount(scope.$index)"
                :rules="[
                  {
                    required: formData.supplier_fees.length > 0,
                    message: '请输入单价',
                    trigger: 'blur',
                  },
                ]"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="total_amount" label="小计">
            <template #default="scope">
              <el-input
                v-model="scope.row.total_amount"
                disabled
                style="width: 100%"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template #default="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                @click="removeSupplierFee(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; text-align: right">
          <el-button size="small" type="primary" @click="addSupplierFee"
            >新增一项费用</el-button
          >
        </div>
      </el-card>

      <el-card class="flight-info-card" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>第三方费用明细</span>
          </div>
        </template>
        <el-table :data="formData.third_party_fees" border style="width: 100%">
            <el-table-column prop="supplier_id" label="供应商">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>供应商</span>
            </template>
            <template #default="scope">

              <el-select
                v-model="scope.row.supplier_id"
                placeholder="请选择供应商"
                clearable
                style="width: 100%"

              >
              <div
                  v-infinite-scroll="getSupplierLoad"
                  :infinite-scroll-disabled="supplier_busy"
                >
                <el-option
                  v-for="item in suppliersList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
                </div>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fee_type_id" label="费用类型">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>费用类型</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.fee_type_id"
                placeholder="请选择费用类型"
                clearable
                style="width: 100%"
                :rules="[
                  {
                    required: formData.third_party_fees.length > 0,
                    message: '请选择费用类型',
                    trigger: 'change',
                  },
                ]"
              >
                <el-option
                  v-for="item in feeTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="currency_id" label="货币类型">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>货币类型</span>
            </template>
            <template #default="scope">

              <el-select
                v-model="scope.row.currency_id"
                placeholder="请选择货币类型"
                clearable
                style="width: 100%"
                :rules="[
                  {
                    required: formData.third_party_fees.length > 0,
                    message: '请选择货币类型',
                    trigger: 'change',
                  },
                ]"
              >
                <el-option
                  v-for="item in currencyTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>数量</span>
            </template>
            <template #default="scope">
              <el-input
                v-model.number="scope.row.quantity"
                placeholder="请输入数量"
                style="width: 100%"
                @input="calculateThirdPartytotal_amount(scope.$index)"
                :rules="[
                  {
                    required: formData.third_party_fees.length > 0,
                    message: '请输入数量',
                    trigger: 'blur',
                  },
                ]"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价">
            <template slot="header" slot-scope="scope">
              <span><span style="color: red">*</span>单价</span>
            </template>
            <template #default="scope">
              <el-input
                v-model.number="scope.row.price"
                placeholder="请输入单价"
                style="width: 100%"
                @input="calculateThirdPartytotal_amount(scope.$index)"
                :rules="[
                  {
                    required: formData.third_party_fees.length > 0,
                    message: '请输入单价',
                    trigger: 'blur',
                  },
                ]"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="total_amount" label="小计">
            <template #default="scope">
              <el-input
                v-model="scope.row.total_amount"
                disabled
                style="width: 100%"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template #default="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入备注"
                style="width: 100%"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                @click="removeThirdPartyFee(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; text-align: right">
          <el-button size="small" type="primary" @click="addThirdPartyFee"
            >新增一项费用</el-button
          >
        </div>
      </el-card>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="goBack">取消</el-button>
      <el-button size="small" type="primary" @click="submitForm"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { feeTypesList } from "@/api/finance";
import { currenciesList } from "@/api/finance";
import { getAirlinesList } from "@/api/system/airlines";
import { getStationsList } from "@/api/system/stations";
import { editOrders, getOrders, addOrders } from "@/api/order";
import { customersList } from "@/api/custmoer";
import { suppliersList } from "@/api/suppliers";
import { getPaymentPeriodsList } from "@/api/system/paymentPeriods";
import { listUser } from "@/api/system/user";
import { orderProgressList, orderStatusesList } from "@/api/order";
import { getToken } from "@/utils/auth";

import { mapGetters } from "vuex";

export default {
  name: "OrderDetail",
  data() {
    return {
      activeTab: 'orderInfo',
      formData: {
        no:"",
        id: "",
        customer_id: "",
        supplier_id: "",
        order_status_id: "",
        order_process_id: "",
        customer_payment_period_id: "",
        accept_at: "",
        customs_broker: "",
        delivery_party: "",
        customer_billing_weight: "",
        supplier_billing_weight: "",
        shipper: "",
        receiver: "",
        notify_person: "",
        file: "",
        bl_file: "",
        remark: "",
        mark: "",
        payment_period_id:"",
        period_days:"",
        customer_air_freight_price: "",
        supplier_air_freight_price: "",
        flight_info: {
          bl_no: "",
          rc_no: "",
          airline_id: "",
          flight_no: "",
          originating_station_id: "",
          transfer_station_id: "",
          destination_station_id: "",
          flight_date: "",
          arrival_date: "",
          second_trip_date: "",
          latest_delivery_time: "",
          cut_off_at: "",
          flight_day: "",
          actual_flight_day: "",
          is_delays: false,
        },
        customer_fees: [
        // 移动至费用明细栏的内容已在对应 tab 中展示，此处注释为示意原数据结构

          {
            fee_type_id: "",
            currency_id: "",
            quantity: 0,
            price: 0,
            total_amount: 0,
            remark: "",
          },
        ],
        supplier_fees: [
          {
            fee_type_id: "",
            currency_id: "",
            quantity: 0,
            price: 0,
            total_amount: 0,
            remark: "",
          },
        ],
        third_party_fees: [
          {
            fee_type_id: "",
            supplier_id:"",
            currency_id: "",
            quantity: 0,
            price: 0,
            total_amount: 0,
            remark: "",
          },
        ],
        booking_info: {
          quantity: "",
          weight: "",
          volume: "",
          volume_weight: "",
          proportion: "",
          remark: "",
        },
        forecast_info: {
          quantity: "",
          weight: "",
          volume: "",
          volume_weight: "",
          proportion: "",
          remark: "",
        },
        airport_info: {
          quantity: "",
          weight: "",
          volume: "",
          volume_weight: "",
          proportion: "",
          remark: "",
        },
        customer_service_user_id:"",
        sale_user_id:"",
        finance_user_id:"",
        user_id:"",
        total_customer_fee_amount:"",
        total_third_party_amount:"",
        total_supplier_fee_amount:"",

        gross_profit_amount:"",
        gross_profit_rate:"",
        customer_payment_period_id:"",
        expected_payment_date:""
      },
      formRules: {

      },
      statusList: [],
      progressList: [],
      customersList: [],
      suppliersList: [],
      paymentPeriodsList: [],
      notifyPersonList: [],
      receiverList: [],
      shipperList: [],
      header: {
        Authorization: "Bearer " + getToken(),
      },
      stationList: [],
      airlineList: [],
      feeTypes: [],
      currencyTypes: [],
      busy:false,
      customer_page:1,
      customerTotal:0,
      supplier_busy:false,
      supplier_page:1,
      supplierTotal:0,
      customLoading:false,
      supplierLoading:false
    };
  },
  beforeCreate() {
    // this.$route.meta.title = `${this.$route.query.title}`
  },
  created() {
    this.orderProgressListHandle();
    this.orderStatusesListHandle();
    this.getCustomersListHandle();
    this.getSuppliersListHandle();
    this.getPaymentPeriodsListHandle();
    this.getUserListHandle();
    this.getAirlinesListHandle();
    this.getStationsListHandle();
    this.getfeeTypesListHandle();
    this.getcurrenciesListHandle();
    this.$route.meta.title = `${this.$route.query.title}`;
    this.$store.dispatch("tagsView/editVisitedViews", this.$route);
    this.getOrderDetail();
    // console.log(this.$route.query);
    // this.$route.meta.title = `${this.$route.query.title}`
  },
  methods: {
    remoteSupplierMethod(query){
      this.supplierLoading   = true
      this.supplier_page=1
       suppliersList({
        page:this.supplier_page,
        keyword:query
      }).then((res) => {
        this.suppliersList =(this.supplier_page==1)?res.data:this.suppliersList.concat(res.data);
        this.supplierTotal=res.meta.total
        this.supplierLoading=false
      });
    },
    remoteCustomMethod(query){
      this.customLoading = true
      this.customer_page=1
       customersList({
        page:this.customer_page,
        keyword:query
      }).then((res) => {
        this.customersList =(this.customer_page==1)?res.data:this.customersList.concat(res.data);
        this.customerTotal=res.meta.total
        this.customLoading=false
      });
    },
    getSupplierLoad(){
      this.supplier_page+=1
      this.getSuppliersListHandle()
    },
    getLoad(){

      this.customer_page+=1
      this.getCustomersListHandle()
    },
    calculateSuppliertotal_amount(index) {
      this.formData.supplier_fees[index].total_amount =
        this.formData.supplier_fees[index].quantity *
        this.formData.supplier_fees[index].price;
    },
    addSupplierFee() {
      this.formData.supplier_fees.push({
        fee_type_id: "",
        currency_id: "",
        quantity: 0,
        price: 0,
        total_amount: 0,
        remark: "",
      });
    },
    removeSupplierFee(index) {
      this.formData.supplier_fees.splice(index, 1);
    },
    calculateThirdPartytotal_amount(index) {
      this.formData.third_party_fees[index].total_amount =
        this.formData.third_party_fees[index].quantity *
        this.formData.third_party_fees[index].price;
    },
    addThirdPartyFee() {
      this.formData.third_party_fees.push({
        fee_type_id: "",
        currency_id: "",
        supplier_id:"",
        quantity: 0,
        price: 0,
        total_amount: 0,
        remark: "",
      });
    },
    removeThirdPartyFee(index) {
      this.formData.third_party_fees.splice(index, 1);
    },
    getcurrenciesListHandle() {
      currenciesList().then((res) => {
        this.currencyTypes = res.data;
      });
    },
    getfeeTypesListHandle() {
      feeTypesList().then((res) => {
        this.feeTypes = res.data;
      });
    },
    calculatetotal_amount(index) {
      const fee = this.formData.customer_fees[index];
      fee.total_amount = fee.quantity * fee.price;
    },
    addFee() {
      this.formData.customer_fees.push({
        fee_type_id: "",
        currency_id: "",
        quantity: 0,
        price: 0,
        total_amount: 0,
        remark: "",
      });
    },
    removeFee(index) {
      if (this.formData.customer_fees.length > 1) {
        this.formData.customer_fees.splice(index, 1);
      }
    },
    getStationsListHandle() {
      getStationsList().then((res) => {
        this.stationList = res.data;
      });
    },
    getAirlinesListHandle() {
      getAirlinesList().then((res) => {
        this.airlineList = res.data;
      });
    },
    getOrderDetail() {
      const id = this.$route.query.id;
      if (id) {
        // 这里需要添加获取订单详情的接口调用
        getOrders({ id }).then((res) => {
          this.formData.id = res.id;
          this.formData.no = res.no;
          this.formData.customer_id = res.customer_id;
          this.formData.supplier_id = res.supplier_id;
          this.formData.order_status_id = res.order_status_id;
          this.formData.order_process_id = res.order_process_id;
          this.formData.customer_payment_period_id =
            res.customer_payment_period_id;
          this.formData.accept_at = res.accept_at;
          this.formData.customs_broker = String(res.customs_broker);
          this.formData.delivery_party = String(res.delivery_party);
          this.formData.customer_billing_weight = res.customer_billing_weight;
          this.formData.supplier_billing_weight = res.supplier_billing_weight;
          this.formData.shipper = Number(res.shipper);
          this.formData.receiver = Number(res.receiver);
          this.formData.notify_person = Number(res.notify_person);
          this.formData.file = res.file;
          this.formData.bl_file = res.bl_file;
          this.formData.remark = res.remark;
          this.formData.mark = res.mark;
          this.formData.payment_period_id=res.payment_period_id

          this.formData.period_days=res.period_days
          this.formData.customer_air_freight_price =
            res.customer_air_freight_price;
          this.formData.supplier_air_freight_price =
            res.supplier_air_freight_price;
          this.formData.customer_fees = res.customer_fees;
          this.formData.supplier_fees = res.supplier_fees;
          this.formData.third_party_fees = res.third_party_fees;
          this.formData.booking_info=res.booking_info
          this.formData.forecast_info=res.forecast_info
          this.formData.airport_info=res.airport_info?res.airport_info:{
          quantity: "",
          weight: "",
          volume: "",
          volume_weight: "",
          proportion: "",
          remark: "",
        }
          this.formData.flight_info=res.flight_info
          this.formData.customer_service_user_id=res.customer_service_user_id
          this.formData.sale_user_id=res.sale_user_id
          this.formData.finance_user_id=res.finance_user_id
          this.formData.user_id=res.user_id
          this.formData.total_customer_fee_amount=res.total_customer_fee_amount
          this.formData.total_third_party_amount=res.total_third_party_amount
          this.formData.total_supplier_fee_amount=res.total_supplier_fee_amount
          this.formData.gross_profit_amount=res.gross_profit_amount
          this.formData.gross_profit_rate=res.gross_profit_rate
          this.formData.customer_payment_period_id=res.customer_payment_period_id
          this.formData.expected_payment_date=res.expected_payment_date
        });
        // this.formData = res.data;
      } else {
        this.formData = {
          id: "",
          no:"",
          customer_id: "",
          supplier_id: "",
          order_status_id: "",
          order_process_id: "",
          customer_payment_period_id: "",
          accept_at: "",
          customs_broker: "",
          delivery_party: "",
          customer_billing_weight: "",
          supplier_billing_weight: "",
          shipper: "",
          receiver: "",
          notify_person: "",
          file: "",
          bl_file: "",
          remark: "",
          mark: "",
          payment_period_id:"",
          period_days:"",
          customer_air_freight_price: "",
          supplier_air_freight_price: "",
          flight_info: {
            bl_no: "",
            rc_no: "",
            airline_id: "",
            flight_no: "",
            originating_station_id: "",
            transfer_station_id: "",
            destination_station_id: "",
            flight_date: "",
            arrival_date: "",
            second_trip_date: "",
            latest_delivery_time: "",
            cut_off_at: "",
            flight_day: "",
            actual_flight_day: "",
            is_delays: false,
          },
          customer_fees: [
            {
              fee_type_id: "",
              currency_id: "",
              quantity: 0,
              price: 0,
              total_amount: 0,
              remark: "",
            },
          ],
          supplier_fees: [
            {
              fee_type_id: "",
              currency_id: "",
              quantity: 0,
              price: 0,
              total_amount: 0,
              remark: "",
            },
          ],
          third_party_fees: [
            {
              fee_type_id: "",
              currency_id: "",
              supplier_id:"",
              quantity: 0,
              price: 0,
              total_amount: 0,
              remark: "",
            },
          ],
          booking_info: {
            quantity: "",
            weight: "",
            volume: "",
            volume_weight: "",
            proportion: "",
            remark: "",
          },
          forecast_info: {
            quantity: "",
            weight: "",
            volume: "",
            volume_weight: "",
            proportion: "",
            remark: "",
          },
          airport_info: {
          quantity: "",
          weight: "",
          volume: "",
          volume_weight: "",
          proportion: "",
          remark: "",

        },
         customer_service_user_id:"",
        sale_user_id:"",
        finance_user_id:"",
        user_id:"",
        total_customer_fee_amount:"",
        total_third_party_amount:"",
        total_supplier_fee_amount:"",

        gross_profit_amount:"",
        gross_profit_rate:"",
        customer_payment_period_id:"",
        expected_payment_date:""
        };
      }
    },
    getUserListHandle() {
      listUser().then((res) => {
        this.notifyPersonList = res.data;
        this.receiverList = res.data;
        this.shipperList = res.data;
      });
    },
    getPaymentPeriodsListHandle() {
      getPaymentPeriodsList().then((res) => {
        this.paymentPeriodsList = res.data;
      });
    },
    getCustomersListHandle() {
      if(this.customersList.length>=this.customerTotal&&this.customer_page!==1){

        return
      }
      this.busy = true;

      customersList({
        page:this.customer_page
      }).then((res) => {
        this.customersList =(this.customer_page==1)?res.data:this.customersList.concat(res.data);
        this.customerTotal=res.meta.total
        this.busy=false
      });
    },
    getSuppliersListHandle() {
      if(this.suppliersList.length>=this.supplierTotal&&this.supplier_page!==1){

        return
      }
      this.supplier_busy = true;
      suppliersList({
        page:this.supplier_page
      }).then((res) => {
        this.suppliersList =(this.supplier_page==1)?res.data:this.suppliersList.concat(res.data);
        this.supplierTotal=res.meta.total
        this.supplier_busy=false
      });
    },
    orderProgressListHandle() {
      orderProgressList().then((res) => {
        this.progressList = res.data;
      });
    },
    orderStatusesListHandle() {
      orderStatusesList().then((res) => {
        this.statusList = res.data;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    submitForm() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          if (this.formData.id) {
            editOrders({
              id: this.formData.id,
              no: this.formData.no,
               customer_id: this.formData.customer_id,
              supplier_id: this.formData.supplier_id,
              order_status_id: this.formData.order_status_id,
              order_process_id: this.formData.order_process_id,
              customer_payment_period_id:
                this.formData.customer_payment_period_id,
              accept_at: this.formData.accept_at,
              customs_broker: this.formData.customs_broker,
              delivery_party: this.formData.delivery_party,
              customer_billing_weight: this.formData.customer_billing_weight,
              supplier_billing_weight: this.formData.supplier_billing_weight,
              shipper: this.formData.shipper,
              receiver: this.formData.receiver,
              notify_person: this.formData.notify_person,
              file: this.formData.file,
              bl_file: this.formData.bl_file,
              remark: this.formData.remark,
              mark: this.formData.mark,
              payment_period_id:this.formData.payment_period_id,
              period_days:this.formData.period_days,
              customer_air_freight_price:
                this.formData.customer_air_freight_price,
              supplier_air_freight_price:
                this.formData.supplier_air_freight_price,
              customer_service_user_id:this.formData.customer_service_user_id,
              sale_user_id:this.formData.sale_user_id,
              finance_user_id:this.formData.finance_user_id,
              user_id:this.formData.user_id,
              total_customer_fee_amount:this.formData.total_customer_fee_amount,
              total_third_party_amount:this.formData.total_third_party_amount,
              total_supplier_fee_amount:this.formData.total_supplier_fee_amount,
              gross_profit_amount:this.formData.gross_profit_amount,
              gross_profit_rate:this.formData.gross_profit_rate,
              customer_payment_period_id:this.formData.customer_payment_period_id,
              expected_payment_date:this.formData.expected_payment_date,
              flight_info: JSON.stringify(this.formData.flight_info),
              customer_fees: JSON.stringify(this.formData.customer_fees),
              supplier_fees: JSON.stringify(this.formData.supplier_fees),
              third_party_fees: JSON.stringify(this.formData.third_party_fees),
              booking_info: JSON.stringify(this.formData.booking_info),
              forecast_info: JSON.stringify(this.formData.forecast_info),
              airport_info: JSON.stringify(this.formData.airport_info),
            }).then(() => {
              this.$message.success("编辑成功");
              this.goBack();
              this.$tab.closePage(this.$route);
            });
          } else {
            addOrders({
              id: this.formData.id,

               customer_id: this.formData.customer_id,
              supplier_id: this.formData.supplier_id,
              order_status_id: this.formData.order_status_id,
              order_process_id: this.formData.order_process_id,
              customer_payment_period_id:
                this.formData.customer_payment_period_id,
              accept_at: this.formData.accept_at,
              customs_broker: this.formData.customs_broker,
              delivery_party: this.formData.delivery_party,
              customer_billing_weight: this.formData.customer_billing_weight,
              supplier_billing_weight: this.formData.supplier_billing_weight,
              shipper: this.formData.shipper,
              receiver: this.formData.receiver,
              notify_person: this.formData.notify_person,
              file: this.formData.file,
              bl_file: this.formData.bl_file,
              remark: this.formData.remark,
              mark: this.formData.mark,
              payment_period_id:this.formData.payment_period_id,
              period_days:this.formData.period_days,
              customer_air_freight_price:
                this.formData.customer_air_freight_price,
              supplier_air_freight_price:
                this.formData.supplier_air_freight_price,
              customer_service_user_id:this.formData.customer_service_user_id,
              sale_user_id:this.formData.sale_user_id,
              finance_user_id:this.formData.finance_user_id,
              user_id:this.formData.user_id,
              total_customer_fee_amount:this.formData.total_customer_fee_amount,
              total_supplier_fee_amount:this.formData.total_supplier_fee_amount,
              gross_profit_amount:this.formData.gross_profit_amount,
              gross_profit_rate:this.formData.gross_profit_rate,
              customer_payment_period_id:this.formData.customer_payment_period_id,
              expected_payment_date:this.formData.expected_payment_date,
              flight_info: JSON.stringify(this.formData.flight_info),
              customer_fees: JSON.stringify(this.formData.customer_fees),
              supplier_fees: JSON.stringify(this.formData.supplier_fees),
              third_party_fees: JSON.stringify(this.formData.third_party_fees),
              booking_info: JSON.stringify(this.formData.booking_info),
              forecast_info: JSON.stringify(this.formData.forecast_info),
              airport_info: JSON.stringify(this.formData.airport_info),
            }).then(() => {
              this.$message.success("新增成功");
              this.goBack();
              this.$tab.closePage(this.$route);
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.my-form {
  padding: 20px;
}
.dialog-footer {
  text-align: right;
  padding: 10px 20px;
}

::v-deep .el-tabs__header {
  padding: 0 20px;
  padding-top:10px;
  margin:0px !important;
}
</style>
